<template>
  <div class="dormitory-checkin">
    <div class="header">
      <router-link to="/main/wuye/dormitory/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>入住登记</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待入住" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="roomNo" label="分配宿舍" width="120"></el-table-column>
            <el-table-column prop="roomType" label="宿舍类型" width="120"></el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleCheckin(scope.row)">入住</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已入住" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applyNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="入住人" width="120"></el-table-column>
            <el-table-column prop="roomNo" label="宿舍号" width="120"></el-table-column>
            <el-table-column prop="bedNo" label="床位号" width="120"></el-table-column>
            <el-table-column prop="checkinTime" label="入住时间" width="180"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="入住详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="checkin-detail" v-if="currentCheckin">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentCheckin.applyNo }}</el-descriptions-item>
          <el-descriptions-item label="入住人">{{ currentCheckin.applicant }}</el-descriptions-item>
          <el-descriptions-item label="宿舍号">{{ currentCheckin.roomNo }}</el-descriptions-item>
          <el-descriptions-item label="宿舍类型">{{ currentCheckin.roomType }}</el-descriptions-item>
          <el-descriptions-item label="床位号" v-if="currentCheckin.bedNo">{{ currentCheckin.bedNo }}</el-descriptions-item>
          <el-descriptions-item label="入住时间" v-if="currentCheckin.checkinTime">{{ currentCheckin.checkinTime }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section" v-if="currentCheckin.checkinInfo">
          <h4>入住信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="钥匙编号">{{ currentCheckin.checkinInfo.keyNo }}</el-descriptions-item>
            <el-descriptions-item label="门禁卡号">{{ currentCheckin.checkinInfo.cardNo }}</el-descriptions-item>
            <el-descriptions-item label="水表读数">{{ currentCheckin.checkinInfo.waterMeter }}</el-descriptions-item>
            <el-descriptions-item label="电表读数">{{ currentCheckin.checkinInfo.electricityMeter }}</el-descriptions-item>
          </el-descriptions>
          <p class="checkin-remark">备注：{{ currentCheckin.checkinInfo.remark }}</p>
        </div>
      </div>
    </el-dialog>

    <!-- 入住登记对话框 -->
    <el-dialog title="入住登记" :visible.sync="checkinDialogVisible" width="50%">
      <el-form :model="checkinForm" label-width="100px">
        <el-form-item label="床位号">
          <el-select v-model="checkinForm.bedNo" placeholder="请选择床位">
            <el-option label="1号床" value="1"></el-option>
            <el-option label="2号床" value="2"></el-option>
            <el-option label="3号床" value="3"></el-option>
            <el-option label="4号床" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="钥匙编号">
          <el-input v-model="checkinForm.keyNo"></el-input>
        </el-form-item>

        <el-form-item label="门禁卡号">
          <el-input v-model="checkinForm.cardNo"></el-input>
        </el-form-item>

        <el-form-item label="水表读数">
          <el-input-number v-model="checkinForm.waterMeter" :min="0" :precision="2"></el-input-number>
          <span class="unit">立方米</span>
        </el-form-item>

        <el-form-item label="电表读数">
          <el-input-number v-model="checkinForm.electricityMeter" :min="0" :precision="2"></el-input-number>
          <span class="unit">度</span>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="checkinForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="checkinDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCheckin">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [],
      completedList: [],
      detailDialogVisible: false,
      checkinDialogVisible: false,
      currentCheckin: null,
      checkinForm: {
        bedNo: '',
        keyNo: '',
        cardNo: '',
        waterMeter: 0,
        electricityMeter: 0,
        remark: ''
      }
    }
  },
  created() {
    // TODO: 从后端获取待入住和已入住列表
    this.pendingList = [
      {
        applyNo: 'SS202403110001',
        applicant: '张三',
        roomNo: '101',
        roomType: '双人间',
        approvalTime: '2024-03-11 10:00:00'
      }
    ]
  },
  methods: {
    viewDetail(row) {
      this.currentCheckin = row
      this.detailDialogVisible = true
    },
    handleCheckin(row) {
      this.currentCheckin = row
      this.checkinForm = {
        bedNo: '',
        keyNo: '',
        cardNo: '',
        waterMeter: 0,
        electricityMeter: 0,
        remark: ''
      }
      this.checkinDialogVisible = true
    },
    submitCheckin() {
      if (!this.checkinForm.bedNo || !this.checkinForm.keyNo || !this.checkinForm.cardNo) {
        this.$message.error('请填写完整的入住信息')
        return
      }

      // TODO: 提交入住信息到后端
      const checkinInfo = {
        ...this.checkinForm,
        time: new Date().toLocaleString()
      }

      this.currentCheckin.checkinInfo = checkinInfo
      this.currentCheckin.bedNo = checkinInfo.bedNo
      this.currentCheckin.checkinTime = checkinInfo.time

      // 从待入住列表移动到已入住列表
      const index = this.pendingList.findIndex(item => item.applyNo === this.currentCheckin.applyNo)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentCheckin)
      }

      this.$message.success('入住登记成功')
      this.checkinDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dormitory-checkin {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .checkin-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .unit {
    margin-left: 10px;
    color: #606266;
  }
}
</style> 